<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接</title>
</head>
<body>

    <!-- 
        超链接
            - 通过超链接可以使网页跳转到其他页面
            - 使用a标签来创建一个超链接
            - 属性：
                href 指向要跳转到的位置
                    可选值：
                        - 绝对路径
                            https://www.baidu.com
                            - 跳转到外部的页面
                        - 相对路径
                            ./10_列表.html
                            - 跳转到内部的页面
                        - #
                            #
                            - 回到当前页面的顶部

                        - 跳转到页面的指定位置
                            #id
                            - 跳转到指定id对应元素所在的位置

                target 指定打开页面的位置
                    可选值：
                        _self 默认值，在当前标签中打开
                        _blank ，在新的标签中打开

     -->
    <a target="_blank" href="https://www.baidu.com">我是一个超链接</a> 
    <a href="https://www.jd.com">京东</a>
    <hr>
    <a href="10_列表.html">去11</a>

    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque magni nisi, commodi quasi maiores saepe quia accusantium excepturi. Perferendis non voluptatibus esse nemo architecto, itaque perspiciatis eius culpa ratione a?
    </p>

    <!-- 
        id属性
            - id表示的就是唯一的标识
            - 在html中标签可以设置一个id属性，
                在同一个页面中id的属性值不能重复

     -->
    <p id="p1">
        第二个p元素
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ipsum corporis labore ullam sequi minus natus fugiat dolorum placeat. Quaerat inventore sed officiis illum magnam quia ratione ipsam dolorum perspiciatis.
    </p>

    <p id="p2">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maiores voluptas alias tenetur voluptate velit libero officiis nihil repellendus, ad porro accusantium deleniti provident, repellat doloremque, dignissimos eius quae est impedit?
    </p>

    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque magni nisi, commodi quasi maiores saepe quia accusantium excepturi. Perferendis non voluptatibus esse nemo architecto, itaque perspiciatis eius culpa ratione a?
    </p>

    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ipsum corporis labore ullam sequi minus natus fugiat dolorum placeat. Quaerat inventore sed officiis illum magnam quia ratione ipsam dolorum perspiciatis.
    </p>

    <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maiores voluptas alias tenetur voluptate velit libero officiis nihil repellendus, ad porro accusantium deleniti provident, repellat doloremque, dignissimos eius quae est impedit?
    </p>

    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque magni nisi, commodi quasi maiores saepe quia accusantium excepturi. Perferendis non voluptatibus esse nemo architecto, itaque perspiciatis eius culpa ratione a?
    </p>

    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ipsum corporis labore ullam sequi minus natus fugiat dolorum placeat. Quaerat inventore sed officiis illum magnam quia ratione ipsam dolorum perspiciatis.
    </p>

    <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maiores voluptas alias tenetur voluptate velit libero officiis nihil repellendus, ad porro accusantium deleniti provident, repellat doloremque, dignissimos eius quae est impedit?
    </p>

    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque magni nisi, commodi quasi maiores saepe quia accusantium excepturi. Perferendis non voluptatibus esse nemo architecto, itaque perspiciatis eius culpa ratione a?
    </p>

    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ipsum corporis labore ullam sequi minus natus fugiat dolorum placeat. Quaerat inventore sed officiis illum magnam quia ratione ipsam dolorum perspiciatis.
    </p>

    <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maiores voluptas alias tenetur voluptate velit libero officiis nihil repellendus, ad porro accusantium deleniti provident, repellat doloremque, dignissimos eius quae est impedit?
    </p>

    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque magni nisi, commodi quasi maiores saepe quia accusantium excepturi. Perferendis non voluptatibus esse nemo architecto, itaque perspiciatis eius culpa ratione a?
    </p>

    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ipsum corporis labore ullam sequi minus natus fugiat dolorum placeat. Quaerat inventore sed officiis illum magnam quia ratione ipsam dolorum perspiciatis.
    </p>

    <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maiores voluptas alias tenetur voluptate velit libero officiis nihil repellendus, ad porro accusantium deleniti provident, repellat doloremque, dignissimos eius quae est impedit?
    </p>

    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque magni nisi, commodi quasi maiores saepe quia accusantium excepturi. Perferendis non voluptatibus esse nemo architecto, itaque perspiciatis eius culpa ratione a?
    </p>

    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ipsum corporis labore ullam sequi minus natus fugiat dolorum placeat. Quaerat inventore sed officiis illum magnam quia ratione ipsam dolorum perspiciatis.
    </p>

    <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maiores voluptas alias tenetur voluptate velit libero officiis nihil repellendus, ad porro accusantium deleniti provident, repellat doloremque, dignissimos eius quae est impedit?
    </p>

    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque magni nisi, commodi quasi maiores saepe quia accusantium excepturi. Perferendis non voluptatibus esse nemo architecto, itaque perspiciatis eius culpa ratione a?
    </p>

    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel ipsum corporis labore ullam sequi minus natus fugiat dolorum placeat. Quaerat inventore sed officiis illum magnam quia ratione ipsam dolorum perspiciatis.
    </p>

    <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maiores voluptas alias tenetur voluptate velit libero officiis nihil repellendus, ad porro accusantium deleniti provident, repellat doloremque, dignissimos eius quae est impedit?
    </p>

    <a href="#">回到顶部</a>

    <a href="#p1">跳转到第二段</a>
    
</body>
</html>